import React, {PureComponent} from 'react';
import {
	Image,
	StyleSheet, Text, TouchableOpacity,
	View
} from 'react-native';

import PropTypes from 'prop-types';

/**
 * @FileName: CommonMyCell
 * @Author: mazaiting
 * @Date: 2018/6/14
 * @Description: 自定义Cell
 */
class CommonMyCell extends PureComponent {
	static propTypes = {
		// 左侧图标名
		leftIconName: PropTypes.string.isRequired,
		// 左侧标题
		leftTitle: PropTypes.string.isRequired,
		// 右侧图标名
		rightIconName: PropTypes.string,
		// 右侧标题
		rightTitle: PropTypes.string
	};
	
	static defaultProps = {
		// 左侧图标名
		leftIconName: '',
		// 左侧标题
		leftTitle: '',
		// 右侧图标名
		rightIconName: '',
		// 右侧标题
		rightTitle: ''
	};
	
	render() {
		return (
			<TouchableOpacity activeOpacity={0.5}>
				<View style={styles.container}>
					{/*左边*/}
					<View style={styles.leftViewStyle}>
						{/*图片*/}
						<Image
							source={{uri: this.props.leftIconName}}
							style={styles.leftImageStyle}
						/>
						{/*文本*/}
						<Text style={styles.leftTitleStyle}>{this.props.leftTitle}</Text>
					</View>
					{/*右边*/}
					<View style={styles.rightViewStyle}>
						{this.renderRightSubView()}
					</View>
				</View>
			</TouchableOpacity>
		)
	}
	
	/**
	 * 渲染右侧子视图
	 */
	renderRightSubView() {
		return (
			<View style={{flexDirection: 'row', alignItems: 'center'}}>
				{this.renderRightContent()}
				{/*箭头*/}
				<Image style={{width: 16, height: 16, marginLeft:8, marginRight: 8}} source={{uri: 'icon_cell_right_arrow'}}/>
			</View>
		)
	}
	
	/**
	 * 右边具体返回的值
	 */
	renderRightContent() {
		// 判断图片名长度是否为0
		if (this.props.rightIconName.length === 0) {
			// 不返回图片
			return (
				<Text style={{color: 'gray'}}>{this.props.rightTitle}</Text>
			)
		} else {
			// 返回图片
			return (
				<Image
					source={{uri: 'mine_new'}}
					style={{
						width: 24,
						height: 20
					}}
				/>
			)
		}
	}
}

/**
 * 样式属性
 */
const styles = StyleSheet.create({
	container: {
		backgroundColor: 'white',
		// 主轴方向
		flexDirection: 'row',
		// 对齐方式
		justifyContent: 'space-between',
		// 侧轴对齐
		alignItems: 'center',
		// 高度
		height: 44,
		// 下边框
		borderBottomColor:'#E8E8E8',
		borderBottomWidth: 0.5
	},
	// 左边View样式
	leftViewStyle: {
		// 主轴方向
		flexDirection: 'row',
		// 侧轴居中
		alignItems: 'center',
		// 左外边距
		marginLeft: 8
	},
	// 左侧图片样式
	leftImageStyle: {
		width: 30,
		height: 30,
		marginRight: 6
	},
	// 左侧文本样式
	leftTitleStyle: {
		fontSize: 14,
		color: '#222'
	},
	// 左边View样式
	rightViewStyle: {}
});

/**
 * 导出当前Module
 */
module.exports = CommonMyCell;